<template>
	<swiper class="classify-swipe" @change="changeswiper" :current="currentIndex">
		<swiper-item v-for="(item, i) in tabbarList" :key="i">
			<list-item :showBack="showBack" :articleList="listCatDatat[i]" :load="load[i]" @loadmoer="loadmoer"></list-item>
		</swiper-item>
	</swiper>
</template>

<script>
	import listItem from './list-item.vue'
	export default {
		name:"list",
		props:{
			tabbarList:{
				type: Array,
				default() {
					return [];
				}
			},
			activeItem:{
				type:Number,
				default: 0,
			},
			showBack:{
				type:Boolean,
				default: false,
			}
		},
		watch:{
			activeItem(newVal,oldVal){
				// console.log(newVal,oldVal);
				this.currentIndex = newVal
			},
			tabbarList(newVal){
				if(newVal.length === 0) return
				this.get_article(this.activeItem)
			}
		},
		data() {
			return {
				currentIndex: 0,
				articleList:[],
				listCatDatat:{},
				load:{ },
				paggesize:10,
			};
		},
		mounted() {
			// this.get_article("后端开发",0)
		},
		created() {
			uni.$on("up_likes_detail",(res)=>{
				// 清空数据防止key重复报错
				this.listCatDatat={}, 
				this.load={},
				
				this.get_article(this.activeItem)
			})
		},
		methods:{
			loadmoer(){
				if(this.load[this.activeItem].loading === "noMore") return false;
				this.load[this.activeItem].page++
				this.get_article(this.activeItem)
				console.log("我上拉了")
			},
			changeswiper(e){
				const {current} = e.detail
				const {name} = this.tabbarList[current]
				this.$emit('changes', current);
				if (this.listCatDatat.length === 0 || !this.listCatDatat[current])
				this.get_article(current)
				// console.log(this.tabbarList[current]);
				// console.log(e);
			},
			async get_article(current){
				// console.log(this.showBack);
				// 请求模板
				if(this.showBack){
					
					let oldData1=[{
	"avatar": "//img2.sycdn.imooc.com/5dafce1a00013fd501400140-160-160.jpg",
    "path": "loading_1/loading_1",
    "title": "mySQL启动管理类命令",
}]
					this.$set(this.listCatDatat, current, oldData1)
				}else{  // 请求分类
					// 翻页的时候判断是否存在当前项，不存在的话就将初始化成第一页
					if(!this.load[current]){
						this.load[current] = {
							page:1,
							loading:'loading'
						}
					}
					// console.log(this.tabbarList,'this.tabbarList[current]this.tabbarList[current]')
					let articleList = await this.$api.get_article({name:this.tabbarList[current].name,page:this.load[current].page,paggesize:this.paggesize})
					if (articleList.length === 0) {
						let oldLoad = {loading: "noMore", page:this.load[current].page}
						oldLoad.loading = "noMore"
						this.$set(this.load, current, oldLoad)
						// 强制渲染页面
						this.$forceUpdate()
						return
					}
					let oldData = this.listCatDatat[current] || []
					oldData.push(...articleList)
					// 解决缓存的问题
					// this.listCatDatat[current] = articleList
					// 因为vue2不能监听对象内的引用数据是否花生改变，因此需要调用$set手动设置
						//   设置的数据，   数据的哪一项， 需要改变成的数据
					this.$set(this.listCatDatat, current, oldData)
					// this.articleList = articleList
					
				}
			}
		},
		components:{
			listItem
		}
	}
</script>

<style lang="scss" scoped>
	.classify-swipe{
		height: 100%;
	}
</style>
